<template>
  <div class="boxs">
    <div class="f1">
      <div class="title"><div class="title_centent">应收账款信息</div></div>
      <ul class="ul">
        <li>
          <el-form ref="ruleForm1" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="合同编号" prop="a">
              <el-input v-model="form.a" @blur="a"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm2" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="合同名称" prop="b">
              <el-input v-model="form.b" @blur="b"></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm3" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="发票号码" prop="c">
              <el-input v-model="form.c" @blur="c"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm4" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="发票代码" prop="d">
              <el-input v-model="form.d" @blur="d"></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm5" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="应收账款金额" prop="e">
              <el-input
                v-model="addform.e"
                @focus="
                  () => {
                    this.addform.e = remoney(this.addform.e)
                  }
                "
                @blur="e"
              ></el-input>
              <p
                style="position: absolute; right: 15px; top: 0px; z-index: 99; font-size: 0.0833rem"
              >
                元
              </p>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm6" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="付款日期" prop="f">
              <el-date-picker
                @change="f"
                :clearable="false"
                v-model="form.f"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form label-width="220px" :rules="rules">
            <el-form-item label="附件" prop="h">
              <el-input style="visibility: hidden"></el-input>
              <div class="f2_content" style="visibility: hidden">
                <div class="license1"></div>
              </div>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label=" " prop="">
              <el-input style="visibility: hidden"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <!-- 合同上传 -->
      <div style="display: flex; justify-content: center; margin-bottom: 30px">
        <div id="datatable">
          <el-table
            :data="fileList"
            border
            style="width: 100%"
            stripe
            :header-cell-style="{
              background: '#F1F5FF',
              color: '#4D4D4D'
            }"
          >
            <el-table-column label="序号" prop="number" min-width="8%" align="center">
            </el-table-column>
            <el-table-column prop="name" label="文件名称" align="center" min-width="30%">
            </el-table-column>
            <el-table-column prop="yszkje" label="上传状态" min-width="20%" align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              min-width="20%"
            >
              <template slot-scope="scope">
                <span class="span" type="text" size="small">
                  <el-upload
                    class="upload"
                    ref="upload"
                    action="string"
                    :name="num"
                    :auto-upload="false"
                    :on-preview="handlePreview"
                    :http-request="uploadFile"
                    :on-change="handleChange"
                    :file-list="fileFormList"
                  >
                    <span
                      @click="aaa(scope.$index)"
                      class="file"
                      slot="trigger"
                      size="small"
                      type="primary"
                      >上传</span
                    >
                  </el-upload>
                </span>
                <span
                  v-show="fileList[scope.$index].yszkje == '已上传'"
                  class="span"
                  @click="examine(scope.$index, fileList)"
                  >查看</span
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="title">
        <div class="title_centent">
          账户信息
          <span style="font-size: 0.0625rem; color: #666; font-weight: 400; margin-left: 0.0781rem"
            >(上述应收账款将回款至该账户)</span
          >
        </div>
      </div>
      <ul class="ul">
        <li>
          <el-form ref="ruleForm7" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="户名" prop="g">
              <el-input v-model="form.g" @blur="g"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="ruleForm8" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="账号" prop="h">
              <el-input v-model="form.h" @blur="h"></el-input>
            </el-form-item>
          </el-form>
        </li>
        <li>
          <el-form ref="ruleForm9" :model="form" label-width="220px" :rules="rules">
            <el-form-item label="开户行" prop="i">
              <el-input v-model="form.i" @blur="i"></el-input>
            </el-form-item>
          </el-form>
          <el-form :model="form" label-width="220px" :rules="rules">
            <el-form-item label=" " prop="">
              <el-input style="visibility: hidden"></el-input>
            </el-form-item>
          </el-form>
        </li>
      </ul>
      <div class="submit">
        <el-tooltip placement="top" v-if="!btn">
          <div slot="content">确认填写的信息是否完整</div>
          <button
            class="btn btn3"
            v-bind:class="{
              active: btn
            }"
            @click="
              addKJApplys(
                'ruleForm1',
                'ruleForm2',
                'ruleForm3',
                'ruleForm4',
                'ruleForm5',
                'ruleForm6',
                'ruleForm7',
                'ruleForm8',
                'ruleForm9'
              )
            "
          >
            预览确认凭证
          </button>
        </el-tooltip>
        <button
          v-else
          class="btn btn3"
          v-bind:class="{
            active: btn
          }"
          @click="
            addKJApplys(
              'ruleForm1',
              'ruleForm2',
              'ruleForm3',
              'ruleForm4',
              'ruleForm5',
              'ruleForm6',
              'ruleForm7',
              'ruleForm8',
              'ruleForm9'
            )
          "
        >
          预览确认凭证
        </button>
      </div>
    </div>
    <el-dialog
      class="inviteAffirmClient"
      :closeOnClickModal="false"
      title="预览"
      :visible.sync="showVisible"
      width=""
      :before-close="closeVisible"
    >
      <p class="dbtip">请确认信息是否无误，提交后不可修改</p>
      <!-- 内容区域 -->
      <div class="dialog-center">
        <PreView :formList="formList" />
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <button
          class="dialog-footer-bnt btn2"
          v-bind:class="{
            activess: submitMessage == '提交中'
          }"
          @click="closeVisible"
        >
          取消
        </button>
        <button
          @click="submit"
          class="dialog-footer-bnt btn2"
          v-bind:class="{
            actives: submitMessage == '提交中'
          }"
        >
          {{ submitMessage }}
        </button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PreView from '@/components/voucher/PreView.vue'

import { base, myPostFetch } from '@/utils'
export default {
  components: { PreView },
  data() {
    return {
      btnStatus: false,
      showVisible: false,
      submitMessage: '提交',
      btn: false,
      num: '1',
      fileList: [
        {
          number: 1,
          name: '合同',
          yszkje: '未上传'
        },
        {
          number: 2,
          name: '发票',
          yszkje: '未上传'
        },
        {
          number: 3,
          name: '结算清单',
          yszkje: '未上传'
        }
      ],
      fileFormList: [],
      formList: [],
      files: [],
      fileTypes: [],
      // InvoiceFileList: [], //发票
      // contractFileList: [], //合同
      // inventoryFileList: [], //结算清单

      form: {
        a: '', //合同编号
        b: '', //合同名称
        c: '', //发票号码
        d: '', //发票代码
        e: '', //应收账款金额
        f: '', //付款日期
        g: '', //户名
        h: '', //账号
        i: '', //开户行
        h: ''
      },
      // 用户填写资料表格
      addform: {
        e: ''
      },
      // 表单验证
      rules: {
        a: [{ required: true, message: ' ', trigger: 'blur' }],
        b: [{ required: true, message: ' ', trigger: 'blur' }],
        c: [{ required: true, message: ' ', trigger: 'blur' }],
        d: [{ required: true, message: ' ', trigger: 'blur' }],
        e: [{ required: true, message: ' ', trigger: 'blur' }],
        f: [{ required: true, message: ' ', trigger: 'blur' }],
        g: [{ required: true, message: ' ', trigger: 'blur' }],
        h: [{ required: true, message: ' ', trigger: 'blur' }],
        i: [{ required: true, message: ' ', trigger: 'blur' }],
        h: [{ required: true, message: ' ', trigger: 'blur' }]
      }
    }
  },
  // 监听器
  watch: {
    files() {
      this.submitBtns()
    }
  },

  methods: {
    a(e) {
      if (e != '') {
        this.$refs['ruleForm1'].clearValidate()
      }
      this.submitBtns()
    },
    b(e) {
      if (e != '') {
        this.$refs['ruleForm2'].clearValidate()
      }
      this.submitBtns()
    },
    c(e) {
      if (e != '') {
        this.$refs['ruleForm3'].clearValidate()
      }
      this.submitBtns()
    },
    d(e) {
      if (e != '') {
        this.$refs['ruleForm4'].clearValidate()
      }
      this.submitBtns()
    },
    f(e) {
      if (e != '') {
        this.$refs['ruleForm6'].clearValidate()
      }
      this.submitBtns()
    },
    g(e) {
      if (e != '') {
        this.$refs['ruleForm7'].clearValidate()
      }
      this.submitBtns()
    },
    h(e) {
      if (e != '') {
        this.$refs['ruleForm8'].clearValidate()
      }
      this.submitBtns()
    },
    i(e) {
      if (e != '') {
        this.$refs['ruleForm9'].clearValidate()
      }
      this.submitBtns()
    },
    closeVisible() {
      if (this.submitMessage == '提交中') return
      this.formList = []
      this.showVisible = false
    },
    addKJApplys(
      ruleForm1,
      ruleForm2,
      ruleForm3,
      ruleForm4,
      ruleForm5,
      ruleForm6,
      ruleForm7,
      ruleForm8,
      ruleForm9
    ) {
      let { a, b, c, d, e, f, g, h, i } = this.form
      this.$refs[ruleForm1].validate(valid => {})
      this.$refs[ruleForm2].validate(valid => {})
      this.$refs[ruleForm3].validate(valid => {})
      this.$refs[ruleForm4].validate(valid => {})
      this.$refs[ruleForm5].validate(valid => {})
      this.$refs[ruleForm6].validate(valid => {})
      this.$refs[ruleForm7].validate(valid => {})
      this.$refs[ruleForm8].validate(valid => {})
      this.$refs[ruleForm9].validate(valid => {})
      if (!this.btn) return this.$Message.error('请上传附件信息')
      if (
        a == '' ||
        b == '' ||
        c == '' ||
        d == '' ||
        e == '' ||
        f == '' ||
        g == '' ||
        h == '' ||
        i == ''
      ) {
        return this.$Message.error('请填写信息')
      }
      this.formList.push(this.form)
      this.getFindputoutGCFile()
      setTimeout(() => {
        this.showVisible = true
      }, 500)
    },
    async getFindputoutGCFile() {
      let applyid = localStorage.getItem('SLApplyid')
      let url = '/api/pros/findfilelists'
      let params = {
        applyid: applyid
      }
      let data = await myPostFetch(url, params)
      localStorage.setItem('orgname', data.data.tblCoopeOrg.orgName)
      localStorage.setItem('entLicenseno', data.data.ent.licenseno)
      localStorage.setItem('orgLicenseno', data.data.tblCoopeOrg.licenseno)
    },
    submit() {
      if (this.submitMessage == '提交中') return
      this.submitMessage = '提交中'
      let { a, b, c, d, e, f, g, h, i } = this.form
      let applyid = localStorage.getItem('SLApplyid')
      let productcode = localStorage.getItem('productcode')
      let token = sessionStorage.getItem('token')
      let formData = new FormData()
      this.files.forEach((file, index) => {
        formData.append('files', file)
        formData.append('fileTypes', this.fileTypes[index])
      })
      let url =
        base +
        `/api/pros/AddputoutsFK?contractno=${a}&contractname=${b}&invoicenumber=${c}&invoicecode=${d}&receivableamount=${e}&paymentdate=${f}&loanacctnname=${g}&loanacctno=${h}&openingbank=${i}&applyid=${applyid}&productcode=${productcode}`
      this.axios
        .post(url, formData, {
          headers: { 'Content-Type': 'multipart/form-data', 'x-auth': token }
        })
        .then(async res => {
          if (res.data.code == 100) {
            localStorage.setItem('putoutid', res.data.data.id)
            localStorage.setItem('formList', JSON.stringify(this.formList))
            this.$router.push('/GCQXDYongXinApply1')
            return
          }
          this.$message.error(res.data.msg)
          this.submitMessage = '确认'
          return
        })
    },
    submitBtns() {
      for (let i = 0; i < this.fileList.length; i++) {
        if (
          this.fileList[0].yszkje == '已上传' &&
          this.fileList[1].yszkje == '已上传' &&
          this.fileList[2].yszkje == '已上传'
        ) {
          this.btnStatus = true
        }
      }
      let { a, b, c, d, e, f, g, h, i } = this.form
      if (
        a == '' ||
        b == '' ||
        c == '' ||
        d == '' ||
        e == '' ||
        f == '' ||
        g == '' ||
        h == '' ||
        i == '' ||
        this.btnStatus == false
      ) {
        this.btn = false
      } else {
        this.btn = true
      }
    },
    aaa(index) {
      this.num = index + ''
      if (index == 0) {
        let i0 = this.fileTypes.findIndex(element => element === 'BusinessContract')
        if (i0 == -1) return
        this.fileTypes.splice(i0, 1)
        this.files.splice(i0, 1)
      } else if (index == 1) {
        let i1 = this.fileTypes.findIndex(element => element === 'BusinessInvoice')
        if (i1 == -1) return
        this.fileTypes.splice(i1, 1)
        this.files.splice(i1, 1)
      } else if (index == 2) {
        let i2 = this.fileTypes.findIndex(element => element === 'BusinessSettlement')
        if (i2 == -1) return
        this.fileTypes.splice(i2, 1)
        this.files.splice(i2, 1)
      }
    },
    // 查看
    examine(index, data) {
      if (data[index].yszkje == '未上传') return
      let val = data[index]
      let name = val.filetype.split('.')[1]
      let imgUrlStr = val.path
      if (name == 'jpg' || name == 'png') {
        const a = document.createElement('a') // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
        a.setAttribute('target', '_blank')
        a.href = val.path
        a.click()
      } else {
        fetch(imgUrlStr).then(res =>
          res.blob().then(blob => {
            const a = document.createElement('a'), // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
              url = window.URL.createObjectURL(blob),
              filename = val.name
            a.href = url
            a.download = filename
            a.click()
            window.URL.revokeObjectURL(url)
          })
        )
      }
    },

    // 文件上传
    handleChange(file, fileList) {
      if (!file.url) {
        file.url = URL.createObjectURL(file.raw)
      }
      let index = this.$refs.upload.name
      if (index == 0) {
        this.files.push(file.raw)
        this.fileTypes.push('BusinessContract')
        this.fileList[index].yszkje = '已上传'
        this.fileList[index].path = file.url
        this.fileList[index].filetype = file.name
      } else if (index == 1) {
        this.files.push(file.raw)
        this.fileTypes.push('BusinessInvoice')
        this.fileList[index].yszkje = '已上传'
        this.fileList[index].path = file.url
        this.fileList[index].filetype = file.name
      } else if (index == 2) {
        this.files.push(file.raw)
        this.fileTypes.push('BusinessSettlement')
        this.fileList[index].yszkje = '已上传'
        this.fileList[index].path = file.url
        this.fileList[index].filetype = file.name
      }
    },
    //自定义上传文件
    uploadFile(file) {},
    handlePreview(file) {},
    // -------------------------文件上传结束-------------------------------
    e(e) {
      this.form.e = this.addform.e
      //获取输入的数据，若不写这行，数据可能输不进去
      this.addform.e = e.target.value
      //将用户输入的数据，自动转换为带千分符的
      this.addform.e = this.fmoney(this.addform.e)
      let value = Number(this.form.e)
      this.submitBtns()
      if (this.addform.e == '') return
      this.form.e = value.toFixed(2)
      if (isNaN(this.form.e)) {
        this.addform.e = ''
      }
    },
    // ------------------------------------------------------------------
    limitInput(value, name) {
      this.addform[name] =
        ('' + value) // 第一步：转成字符串
          .replace(/[^\d^\.]+/g, '') // 第二步：把不是数字，不是小数点的过滤掉
          .replace(/^0+(\d)/, '$1') // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字
          .replace(/^\./, '0.') // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全
          .match(/^\d*(\.?\d{0,2})/g)[0] || ''
    },
    //千分位格式化：10000转为10,000.00
    fmoney(s, n) {
      if (s == '' || s == null || (s == undefined) | isNaN(Number(s))) {
        return s
      }
      s = Number(s) ? Number(s) : s
      n = (n || n == 0) && n > -1 && n <= 20 ? n : 2
      s = parseFloat((s + '').replace(/[^\d\.-]/g, '')).toFixed(n) + ''
      var l = s.split('.')[0].split('').reverse()
      var r = s.split('.')[1]
      var t = ''
      for (var i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? ',' : '')
      }
      if (n > 0) {
        r = '.' + r
      } else if (n == 0) {
        r = ''
      }
      let returnT = t.split('').reverse().join('') + r
      //负数处理
      if (returnT[0] == '-' && returnT[1] == ',') {
        returnT = '-' + returnT.substring(2)
      }
      return returnT
    },
    //千分位反格式化:10,000.00转为10000.00
    remoney(s) {
      let str = ''
      if (s) {
        str = String(s).replace(/,/g, '')
      }
      if (s && (s + '').indexOf('.') > -1 && Number(str)) {
        return String(s).replace(/[^\d\.-]/g, '')
      } else if (s && Number(str)) {
        return str
      } else {
        return s
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxs {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #fff;
  .f1 {
    margin-top: 5%;
    width: 100%;
    .title {
      width: 100%;
      height: 0.4167rem;
      .title_centent {
        display: flex;
        align-items: center;
        width: 5.7292rem;
        height: 100%;
        margin: 0 auto;
        color: #111;
        font-size: 0.0885rem;
        font-weight: 600;
      }
    }
    ul {
      display: flex;
      flex-direction: column;
      justify-content: center;
      li {
        position: relative;
        width: 90%;
        margin-bottom: 18px;
        height: 0.2604rem;
        display: flex;
        justify-content: center;
        .message {
          margin-top: -0.0573rem;
          font-size: 0.0625rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ef2d46;
        }
        .f2_content {
          display: flex;
          margin-top: -41px;
          // 营业执照
          .license1 {
            .aaa11 {
              font-size: 14px;
              font-weight: 700;
              color: #606266;
              width: 130px;
              text-align: right;
              padding: 0px 14px;
            }
          }
        }
      }
    }
    #datatable {
      @media only screen and (min-width: 900px) and (max-width: 1150px) {
        width: 750px;
      }
      // 中屏
      @media only screen and (min-width: 1150px) and (max-width: 1550px) {
        width: 822px;
      }

      @media only screen and (min-width: 1550px) and (max-width: 2580px) {
        width: 900px;
      }
    }
    // 按钮组
    .submit {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 50px;
      margin: 5px 0 5px 0;
      cursor: pointer;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 34px;
        background: #738bd0;
        border-radius: 4px;
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 400;
        color: #ffffff;
        margin-right: 30px;
      }
      .btn1 {
        background-color: #bfbfbf;
      }
      // 提交按钮
      .btn3 {
        background-color: #ccc;
        &.active {
          background-color: #3f6ef2;
        }
        &.actives {
          background-color: rgba(10, 123, 224, 0.6);
        }
      }
    }
  }
}
// 弹出框
.dialog-center {
  box-sizing: border-box;
  padding: 0 0.026rem;
  display: flex;
  flex-direction: column;
  width: 100%;
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    height: 76vh;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    height: 76vh;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    height: 76vh;
  }
  .first {
    display: flex;
    justify-content: center;
    align-items: center;
    // 小屏
    @media only screen and (min-width: 900px) and (max-width: 1535px) {
      min-width: 3.125rem;
      height: 2.3958rem;
    }
    // 中屏
    @media only screen and (min-width: 1536px) and (max-width: 1919px) {
      width: 3.125rem;
      height: 2.3958rem;
    }
    // 大屏
    @media only screen and (min-width: 1920px) and (max-width: 2580px) {
      width: 3.9583rem;
      height: 3.0208rem;
    }

    background-color: #fff;

    h1 {
      font-size: 0.0938rem;
    }
  }
}
.dbtip {
  font-size: 14px;
  background-color: #d1effc;
  padding: 5px;
  margin: auto;
  margin-top: -0.0521rem;
  margin-bottom: 0.0781rem;
}
.dialog-footer {
  display: flex;
  justify-content: space-evenly;
  width: 70%;
  margin: 0 auto;
  .dialog-footer-bnt {
    width: 0.6302rem;
    height: 0.1615rem;
    color: #3f6ef2;
    border: 0.0052rem solid #3f6ef2;
    border-radius: 0.0208rem;
    background-color: #fff;
  }
  .btn2 {
    color: #fff;
    background-color: #3f6ef2;
    &.actives {
      background-color: rgba(10, 123, 224, 0.6);
      border: 0px;
    }
    &.activess {
      background-color: rgba(94, 95, 95, 0.6);
      border: 0px;
    }
  }
}
.abc {
  width: 1.9167rem;
  .el-select {
    width: 100%;
  }
}
.dialog-center-hint {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.1042rem;
  font-size: 0.0885rem;
}
.span {
  cursor: pointer;
  display: inline-block;
  font-size: 0.0781rem;
  font-family: 'Microsoft YaHei';
  font-weight: 400;
  margin-right: 0.026rem;
  color: #0a7be0;
  border-bottom: 1px solid #0a7be0;
  cursor: pointer;
  margin-right: 0.1042rem;
}
.span1 {
  margin-right: 0;
  color: #ff4040;
  border-bottom: 1px solid #ff4040;
}
.el-table tr {
  height: 50px;
}
.el-table thead {
  height: 50px;
}
// 协议
::v-deep .inviteAffirmClient .el-dialog {
  margin-top: 0 !important;
  // 小屏
  @media only screen and (min-width: 900px) and (max-width: 1535px) {
    width: 55%;
    height: 100vh;
  }
  // 中屏
  @media only screen and (min-width: 1536px) and (max-width: 1919px) {
    width: 55%;
    height: 100vh;
  }
  // 大屏
  @media only screen and (min-width: 1920px) and (max-width: 2580px) {
    width: 60%;
    height: 100vh;
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  box-sizing: border-box;
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 910px) {
    width: 100px;
  }
  @media only screen and (min-width: 911px) and (max-width: 999px) {
    width: 150px;
  }
  @media only screen and (min-width: 1000px) and (max-width: 1150px) {
    width: 200px;
  }
  @media only screen and (min-width: 1151px) and (max-width: 1550px) {
    width: 250px;
  }
  height: 39px;
  font-size: 14px;
  border: 1px solid #e0e0e0;
  border-radius: 0px;
  padding: 10px 10px;
  color: #606266;
  outline: 0;
  line-height: 35px !important;
}

::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 300px;
  @media only screen and (min-width: 1px) and (max-width: 910px) {
    width: 100px;
  }
  @media only screen and (min-width: 911px) and (max-width: 999px) {
    width: 150px;
  }
  @media only screen and (min-width: 1000px) and (max-width: 1150px) {
    width: 200px;
  }
  @media only screen and (min-width: 1151px) and (max-width: 1550px) {
    width: 250px;
  }
}
::v-deep .el-form-item__label {
  font-size: 0.0885rem;
  font-weight: 400;
  color: #1f1f20;
}
::v-deep .el-upload-list__item {
  display: none;
}
::v-deep .el-icon-date:before {
  content: '';
}
::v-deep .el-button--small {
  padding: 0.0469rem 0.0781rem;
}
::v-deep .el-dialog__footer {
  padding: 0px 0.1042rem 0.1042rem;
}
</style>
